<!-- 支持长期 或 日期选择器（长期是微信要求的字段） -->
<template>
  <div class="checkbox-date-picker">
    <FormatDatePicker
      class="date-picker"
      v-bind="omit(props, ['onUpdate:value', 'onChange'])"
      :disabled="checked || props.disabled"
      v-model:value="value"
      @change="onChange"
    />
    <a-form-item-rest>
      <a-checkbox class="checkbox" v-model:checked="checked" @change="onChange">{{ KEYWORD }}</a-checkbox>
    </a-form-item-rest>
  </div>
</template>
<script setup lang="ts">
  import FormatDatePicker, { type FormatDataPickerProps } from '@/components/common/date-picker/format-date-picker.vue';
  import { omit } from 'lodash-es';
  import { ref } from 'vue';

  // 微信要求的关键字，表示时间不确定
  const KEYWORD = '长期';

  // 定义类型
  export interface CheckboxDataPickerProps extends FormatDataPickerProps {}

  // 参数配置
  const props = withDefaults(defineProps<CheckboxDataPickerProps>(), {
    allowClear: true,
    bordered: true,
    nextIcon: undefined,
    open: undefined,
    prevIcon: undefined,
    showNow: undefined,
    showTime: undefined,
    showToday: undefined,
    suffixIcon: undefined,
    superNextIcon: undefined,
    superPrevIcon: undefined,
  });

  // 定义事件
  const emits = defineEmits<{
    change: [val: CheckboxDataPickerProps['value']];
    'update:value': [val: CheckboxDataPickerProps['value']];
  }>();

  // 双向绑定value
  const value = ref(props.value);
  const checked = ref(props.value === KEYWORD);

  // onChange 时触发事件
  function onChange() {
    const val = checked.value ? KEYWORD : value.value;
    emits('change', val);
    emits('update:value', val);
  }
</script>
<style lang="less" scoped>
  .checkbox-date-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    .date-picker {
      flex: 1;
      width: 100%;
    }
  }
</style>
